<template>
    <div class="login">
        <div class="login-box">
            <div>
                <span>用户名：</span>
                <input type="text" placeholder="请输入用户名" v-model="name" />
            </div>
            <div>
                <span>密码：</span>
                <input type="password" placeholder=" 请输入密码" v-model="password" />
            </div>
            <div>
                <button @click="dl">登录</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()

let name = ref('')
let password = ref('')
const dl = async () => {
    if (name && password) {
        let code = store.dispatch('Login', [name.value, password.value])
        code.then((res: number) => {
            if (res == 200) {
                router.push('/home')
            } else {
                console.log('登录失败');
            }
        })
    }
    else {
        console.log('账号或密码错误');

    }
}

</script>

<style scoped>
.login {
    width: 800px;
    height: 400px;
    padding: 100px 0;
    background-color: #cde;
}

.login-box {
    width: 400px;
    margin: 0 auto;
    padding: 10px 0;
    border-radius: 15px;
    background-color: white;
    border: 1px solid black;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}

.login-box div {
    width: 400px;
    height: 50px;
    line-height: 50px;
    /* border: 1px solid black; */
}

.login span {
    display: inline-block;
    width: 20%;
    text-align: right;
}

.login input {
    width: 70%;
    height: 32px;
    border-radius: 5px;
    background-color: white;
    text-indent: 0.5rem;
}

.login button {
    width: 80%;
    height: 32px;
    margin: 0 10%;
    border-radius: 5px;
    border: none;
    background-color: #22A6F2;
    color: white;
}
</style>